@extends('layouts.frontend-iframe-base')


@section('css')
    <style>
        #J-map-container{width:100%; height: 380px; margin-bottom: 30px;}
    </style>
@stop

@section('content')
        <!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        我的电站
        <small>全部电站</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">首页</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">

    <div class="row">
        <div class="col-md-12">
            <div id="J-map-container">

            </div>
        </div>
    </div>
    <!-- Your Page Content Here -->
    <div class="row">
        @foreach($sites as $site)
            <div class="col-md-6">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <i class="fa fa-site"></i>
                        <h3 class="box-title">{{$site->name}}</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-5">
                                <img src="{{$site->img}}" class="img-responsive" alt="">
                            </div>
                            <div class="col-md-7">
                                <dl>
                                    <dt>名称</dt>
                                    <dd>{{$site->name}}</dd>
                                    <dt>地址</dt>
                                    <dd>{{$site->province}}{{$site->city}}{{$site->town}}{{$site->address}}</dd>
                                </dl>
                                <a href="/frontend/site/detail?id={{$site->id}}" class="btn btn-info btn-sm"><i class="fa fa-bar-chart-o"></i>&nbsp;查看数据</a>
                            </div>
                        </div>


                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        @endforeach
    </div>

</section>
<!-- /.content -->


@stop

@section('js')
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=2ed2ee9b5023739ffff058f549999a8b"></script>
    <script>
        //显示电站在地图的位置
        $(function(){
            var map = new AMap.Map('J-map-container');
            map.setZoom(10);

            @foreach($sites as $site)

            map.setCenter([{{$site->position_lon}}, {{$site->position_lat}}]);

            var marker_{{$site->id}} = new AMap.Marker({
                position: [{{$site->position_lon}}, {{$site->position_lat}}],
                map:map
            });

            var infowindow_{{$site->id}} = new AMap.InfoWindow({
                content: '<h3 class="title">{{$site->name}}</h3><div>地址：{{$site->address}}</div>',
                offset: new AMap.Pixel(0, -30),
                size:new AMap.Size(230,0)
            });
            //infowindow_{{$site->id}}.open(map,marker_{{$site->id}}.getPosition());

            var clickHandle_{{$site->id}} = AMap.event.addListener(marker_{{$site->id}}, 'click', function() {
                infowindow_{{$site->id}}.open(map, marker_{{$site->id}}.getPosition())
            });

            @endforeach

            AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
                var toolBar = new AMap.ToolBar();
                var scale = new AMap.Scale();
                map.addControl(toolBar);
                map.addControl(scale);
            });

        });
    </script>
@stop